<script setup>
import FcDesigner from '@form-create/designer'
import AmountComponent from '@/components/FormCreate/pccomponents/amountComponent/index.vue'
import { addFlowForm,updateFlowForm,getFlowFormById } from "@/api/modules/flowForm"
import * as pcTools from '@/components/FormCreate/tools'

//传递参数
const props = defineProps({
  //流程文件id
  flowFormId: {
    type: String,
    required: true
  },
});

//流程版本信息
const formVersionFrom = ref({
    pcFormJson:[]
});


const designer = ref()

const updataSign = ref(false);

const config = ref({
    //隐藏拖拽操作按钮
    hiddenDragMenu: false,
    //隐藏拖拽按钮
    hiddenDragBtn: false,
    //是否显示保存按钮
    showSaveBtn: false,
    //是否显示右侧的配置界面
    showConfig: true,
    //是否显示组件的基础配置表单
    showBaseForm: true,
    //是否显示组件联动
    showControl: false,
    //是否显示模块管理
    showPageManage: true,
    //是否显示组件的高级配置表单
    showAdvancedForm: true,
    //是否显示组件的属性配置表单
    showPropsForm: true,
    //是否显示组件的样式配置表单
    showStyleForm: false,
    //是否显示组件的事件配置表单
    showEventForm: false,
    //是否显示组件的验证配置表单
    showValidateForm: true,
    //是否显示表单配置
    showFormConfig: false,
    //是否显示左侧的模板列表
    showTemplate: true,
    //是否显示多端适配选项
    showDevice: true,
    //隐藏组件
    hiddenItem: ['tree','elTreeSelect','colorPicker','elTransfer','cascader',],
    // 隐藏所有子表单组件
    hiddenMenu: ['template','subform','aide','layout'],
    //是否自动选中拖入的组件
    autoActive:false, 
    //是否生成vue2语法的模板组件
    useTemplate:false,
    //定义表单配置默认值 
    formOptions:{},
    //定义渲染规则所需的formData
    appendConfigData: []
});


//设置菜单
const setMenu = async() =>{
    //在该组件中添加该组件
    FcDesigner.component('amountComponent', AmountComponent);//添加金额组件
    //添加组件规则
    designer.value.addComponent(pcTools.AmountComponentRule);
    //新增组件
    designer.value.addMenu({
        name: 'systemTool',
        title: '系统组件',
        list: [
            {
                icon: 'icon-input',
                label: '金额输入',
                name: 'amountComponent',
            },
        ]
    });
}

//查询表单
const getFormData = async() =>{
    console.log("设置表单")
    designer.value.clearDragRule();
    getFlowFormById(props.flowFormId).then(res=>{
        formVersionFrom.value = res.data;
        if(formVersionFrom.value.pcFormJson){
            designer.value.setRule(formVersionFrom.value.pcFormJson);
        }else{
            designer.value.setRule([]);
        }   
    })
}

//修改表单表单
const updateFormData = async() =>{
    updataSign.value = true;
    formVersionFrom.value.pcFormJson = designer.value.getRule();
    updateFlowForm(formVersionFrom.value,0).then(res=>{
        ElNotification({
            title: '修改成功',
            message: '表单保存成功',
            type: 'success',
        })
        updataSign.value = false;
    })
}


onMounted(()=>{
    setMenu();
    getFormData();
})

</script>
<template>
    <el-button-group>
        <el-button type="primary" style="float: right;margin: 15px;" @click="updateFormData()" v-loading="updataSign" size="small">保存PC表单</el-button>
    </el-button-group>
    <div>
        <FcDesigner ref="designer" :config="config" height="100vh"/>
    </div>
</template>